<!--
 * @title: 登录视图
 * @author: andy.ten@tom.com & xukaixing@hotmail.com
 * @Date: 2022-03-19 19:31:29
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2022-04-14 21:05:09
 * @version: 1.0.3
 * @copyright: copyright (c) 2022 andyten
 *  node: you can not copy and/or use and/or modify this program free,
 *  please reserve the segment above.Please mail me if you have any question.
-->

<template>
  <div class="ht-login" :style="{backgroundImage:'url(' + Background + ')'}">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="ht-login-form">
      <h3 class="ht-title">
        Hawthorn - Admin 管理系统
      </h3>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" autocomplete="on" placeholder="账号" tabindex="1" @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-tooltip v-model="capsTooltip" content="大写已开" placement="right" manual>
        <el-form-item prop="password">
          <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" autocomplete="off" placeholder="密码" tabindex="2" @keyup.native="checkCapslock" @blur="capsTooltip = false" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            <svg-icon slot="suffix" :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" class="el-input__icon input-icon show-pwd" @click="showPwd" />
          </el-input>
        </el-form-item>
      </el-tooltip>
      <el-form-item prop="code">
        <el-input v-model="loginForm.code" autocomplete="off" placeholder="验证码" style="width: 63%" tabindex="3" @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="ht-login-validCode">
          <img :src="validCodeUrl" @click="getValidCode">
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px;">
        记住我
      </el-checkbox>
      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>>
<script>
import Background from '@/assets/images/background.jpeg';
import { getValidCodeImg } from '@/api/ht.login';
export default {
  name: 'Login',
  data() {
    return {
      Background: Background,
      validCodeUrl: '',
      passwordType: 'password',
      capsTooltip: false,
      loginForm: {
        username: 'admin',
        password: '123',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '验证码不能为空', trigger: 'change' }]
      },
      loading: false,
      redirect: undefined
    };
  },
  watch: {
    $route(to, from, next) {
    }
  },
  created() {
    // 获取验证码
    this.getValidCode();
    // 获取用户名
  },
  mounted() {
    if (this.loginForm.username === '')
      this.$refs.username.focus();
    else if (this.loginForm.password === '')
      this.$refs.password.focus();
  },
  methods: {
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z');
    },
    showPwd() {
      if (this.passwordType === 'password')
        this.passwordType = '';
      else
        this.passwordType = 'password';

      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    /**
     * @todo: 获取验证码
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-03-23 16:46:35
     */
    getValidCode() {
      getValidCodeImg().then((res) => {
        this.validCodeUrl = res.datas.img;
        this.loginForm.uuid = res.datas.uuid;
      });
    },

    /**
     * @todo:  登录
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-03-23 16:46:13
     */
    async handleLogin() {
      let valid = false;
      try {
        await this.$refs.loginForm.validate();
        valid = true;
        const loginInfo = {
          loginAccount: this.loginForm.username,
          password: this.loginForm.password,
          verifyCode: this.loginForm.code,
          uuid: this.loginForm.uuid,
          language: 1,
          rtflag: this.$store.getters.rtflag
        };
        this.loading = true;
        await this.$store.dispatch('user/handleLogin', loginInfo);
        this.$router.push({ path: this.redirect || '/' });
        // await sleep(1000);
      } catch (err) {
        if (valid)
          this.getValidCode();
      }
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
$dark-gray: #889aa4;

.ht-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-size: cover;

  .ht-title {
    margin: 0 auto 30px;
    color: #707070;
    text-align: center;
  }

  .ht-login-form {
    width: 385px;
    padding: 25px 25px 5px;
    background: #fff;
    border-radius: 6px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon{
      width: 14px;
      height: 39px;
      margin-left: 2px;
    }

    .el-button{
      width:100%;
      font-size: 16px !important;
    }
  }

  .login-tip {
    font-size: 13px;
    color: #bfbfbf;
    text-align: center;
  }

  .ht-login-validCode {
    display: inline-block;

    // float: right;
    width: 33%;
    height: 38px;

    img{
      vertical-align:middle;
      cursor: pointer
    }
  }

  .show-pwd {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 16px;
    color: $dark-gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
